<template>
  <div id="store">
    <el-card>

      <el-form ref="form" :model="store" label-width="100px">
        <el-row>
          <!-- <el-form-item style="float: left;"> -->
            <el-col :span="4">
            <el-upload class="avatar-uploader" action="http://localhost:8080/storeInfo/upload"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="store.logo" :src="store.logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-col>
            <el-col :span="10">
              <el-row>
                <el-col :span="3" style="margin-top: 10px;"><span>商铺评分</span></el-col>
                <el-col :span="18">
              <el-rate v-model="store.storeScore"  :disabled="true" style="margin-top: 10px;"></el-rate>
              </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" style="margin-top: 10px;"><span>菜品评分</span></el-col>
                <el-col :span="18">
              <el-rate v-model="store.dishesScore"  :disabled="true" style="margin-top: 10px;"></el-rate>
              </el-col>
              </el-row>
              <el-row>
                <el-col :span="3" style="margin-top: 10px;"><span>配送评分</span></el-col>
                <el-col :span="18">
              <el-rate v-model="store.dphScore"  :disabled="true" style="margin-top: 10px;"></el-rate>
              </el-col>
              </el-row>
            </el-col>
          <!-- </el-form-item> -->
          <el-button v-if="this.disable" @click="enable" style="margin-left: 2%; float: right;" type="primary">修改</el-button>
          <el-button v-if="!this.disable" @click="submit" style="margin-left: 2%; float: right;" type="primary">提交</el-button>
        </el-row>
        <el-row>
          <el-divider></el-divider>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="商铺名称">
              <el-input :disabled="disable" v-model="store.storeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="接单模式">
              <el-select v-model="store.autoAccept" :disabled="disable" style="width: 330px;">
                  <el-option
                    v-for="item in acceptOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :default-value= "0">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="地址">
              <el-input :disabled="disable" v-model="store.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="联系人">
              <el-input :disabled="disable" v-model="store.linkman"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="联系电话">
              <el-input :disabled="disable" v-model="store.phone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="订餐电话">
              <el-input :disabled="disable" v-model="store.orderPhone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="起送价">
              <el-input :disabled="disable" v-model="store.initiatePrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="配送费">
              <el-input :disabled="disable" v-model="store.dphPrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="商家公告">
              <el-input :disabled="disable" v-model="store.affiche"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="友情提示">
              <el-input :disabled="disable" v-model="store.notice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="配送服务">
              <el-select v-model="store.dispatching" :disabled="disable" style="width: 330px;">
                  <el-option
                    v-for="item in dispactchingOptions"
                    :key="item.option"
                    :label="item.label"
                    :value="item.option"
                    :default-value= "0">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="商铺简介">
              <el-input :disabled="disable" v-model="store.storeIntro"></el-input>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row>
          <el-col :span="12">
            <el-form-item class="form-item" label="开始接单时间">
              <el-time-select
                  placeholder="起始时间"
                   v-model="store.startTime"
                    :disabled="disable"
                  :picker-options="{
                    start: '08:30',
                    step: '00:15',
                    end: '18:30'
                  }">
                </el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form-item" label="结束接单时间">
               <el-time-select
                  placeholder="结束时间"
                  v-model="store.endTime"
                  :disabled="disable"
                  :picker-options="{
                    start: '08:30',
                    step: '00:15',
                    end: '18:30',
                    minTime: store.startTime
                  }">
                </el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

        </el-row>
        </el-row>

      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Store',
    data() {
      return{
        store : {
        },
        disable: true,
        acceptOptions:[{
          value: 0,
          label: '自动接单'
        },{
          value: 1,
          label: '手动接单'
        }],
        value: 0,
        dispactchingOptions:[{
          option:'0',
          label:'不提供配送服务'
        },{
          option:'1',
          label:'提供配送服务'
        }],
        option:0,

      }
    },
    methods:{
      getInfo() {
        this.$http.get("/storeInfo/one").then(resp => {
          if (resp.data.code == 200) {
            this.store = resp.data.data;
            console.log(this.store)
            this.value = resp.data.data.autoAccept
            this.option = resp.data.data.dispatching
          }else{
            this.$message.error(resp.data.message)
          }
        })
      },
      updateInfo() {

        this.$http.post("/storeInfo/update", this.store).then(resp => {
          console.log(resp)
          alert(resp.data.message)
        })
      },
      handleAvatarSuccess(res, file) {
        this.store.logo = res.data;
        this.updateInfo();
      },
      beforeAvatarUpload(file) {
      },
      enable() {
        this.disable = false;
      },
      submit() {
        this.updateInfo();
        this.disable = true;
      }
    },
    created() {
      this.getInfo();
    }
  }
</script>

<style scoped>

.form-item {
  width: 70%;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
